<template>
  <div>
    <common-head :title="$route.name"/>
    <div class="user">
      <van-form validate-first @failed="onFailed" @submit="onSubmit">
        <!-- 联系人姓名 -->
        <van-field
          label="姓名"
          v-model="addressInfo.linkMan"
          name="linkMan"
          placeholder="收货人姓名"
          :rules="[{ required: true, message: '请输入用户名' }]"
        />
        <!-- 联系人手机号 -->
        <van-field
          label="手机号"
          v-model="addressInfo.mobile"
          name="mobile"
          placeholder="收货人手机号"
          :rules="[
          { required: true, message: '请输入手机号码' },
          { pattern: /^[1]([3-9])[0-9]{9}$/, message: '手机号格式错误'}
          ]"
        />
        <!-- 联系人地区 -->
        <van-field
          label="地区"
          name="loacltion"
          :value="areaStr"
          placeholder="请选择省/市/区"
          readonly
          :rules="[{ required: true,}]"
          @click-input="showArea=true"
        />
        <!-- 省市区弹框 -->
        <van-popup v-model="showArea" position="bottom" round>
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>
        <!-- 联系人详细地址 -->
        <van-field
          label="详细地址"
          v-model="addressInfo.address"
          name="address"
          placeholder="街道门牌、楼层房间号等信息"
          :rules="[{ required: true, message: '请输入详细地址' }]"
        />
        <!-- 邮政编码 -->
        <van-field
          label="邮政编码"
          v-model="addressInfo.code"
          name="code"
          placeholder="请输入邮政编码"
          :rules="[
          { required: true, message: '请输入邮政编码' },
          { pattern: /^[1-9][0-9]{5}$/, message: '邮政编码格式错误'}
          ]"
        />
        <!-- 是否设为默认地址 -->
        <van-cell center title="是否设为默认地址">
          <template #right-icon>
            <van-switch v-model="addressInfo.isDefault" size="24" />
          </template>
        </van-cell>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">保存</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import CommonHead from '../../components/CommonHead.vue'
import { addressAdd } from '_api'
import { getToken } from '../../utils'
export default {
  data () {
    return {
      addressInfo: {
        linkMan: '', // 收货人
        mobile: '', // 手机号
        provinceId: '', // 省id
        cityId: '', // 市id
        districtId: '', // 区id
        address: '', // 详细地址
        code: '', // 邮政编码
        isDefault: false, // 是否为默认地址
        token: getToken()
      },
      areaList, // 省市区信息
      showArea: false, // 控制地区弹窗
      areaStr: ''
    }
  },
  methods: {
    // 提交表单
    onSubmit () {
      addressAdd(this.addressInfo).then(res => {
        if (res.data.code === 0) {
          this.$toast.success({
            message: '添加成功',
            duration: 1000,
            onClose: () => {
              this.$router.replace('/address')
            }
          })
        }
      })
    },
    // 显示选择的省市区
    onConfirm (data) {
      // 显示用户选择的省市区
      const arr = []
      data.forEach(item => {
        arr.push(item.name)
      })
      this.areaStr = arr.join('/')
      // 将省市区id存入表单字段
      this.addressInfo.provinceId = data[0].code
      this.addressInfo.cityId = data[1].code
      // 判断区存不存在
      if (data[2]) this.addressInfo.districtId = data[2].code
      this.showArea = false
    },
    onFailed (errorInfo) {
      console.log('failed', errorInfo)
    }
  },
  components: { CommonHead }

}
</script>

<style lang="scss" scoped>

</style>
